window.onresize = function() {
	getRem(100, 607);
	winW = $(window).width();
	drawGrid($(".grid_box").eq(0), "#4ebafb");
	drawGrid($(".grid_box").eq(1), "#ae84f0");
	drawGrid($(".grid_box").eq(2), "#00fe88");
	drawGrid($(".grid_box").eq(3), "#f0ff00");
};
var rotateTimer = null, //矩形旋转timeOut
	topNumTimer = null, //顶部两数字定时
	rectNumTimer = null, //4个网格数字定时
	todayArrviedNum = 1329, //今日入馆
	todayBorrowNum = 1329, //今日借阅
	libOpen = 40185, //图书馆开馆
	totalHours = 321200, //共计服务
	person = 236, //在职服务人员
	reader = 8658236; //已服务持证读者
window.onload = function() {
	getRem(100, 607);
	winW = $(window).width();
	topNumMove();
	new CountUp($(".todayArrived_num"), 0, todayArrviedNum, 0, 4).start();
	new CountUp($(".todayborrow_num"), 0, todayBorrowNum, 0, 4).start();
	rectNumMove();
	new CountUp($(".textContent .day"), 0, libOpen, 0, 2).start();
	new CountUp($(".textContent .hours"), 0, totalHours, 0, 2).start();
	new CountUp($(".textContent .person"), 0, person, 0, 2).start();
	new CountUp($(".textContent .reader"), 0, reader, 0, 2).start();
	//矩形旋转结束后重复动画
	$(".rect_green4").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend", function() {
		if(!!rotateTimer) clearTimeout(rotateTimer);
		$(".rect .GPU").removeClass("move");
		rotateTimer = setTimeout(function() {
			$(".rect .GPU").addClass("move");
		}, 50 / 3)
	})
	//绘制网格
	drawGrid($(".grid_box").eq(0), "#4ebafb");
	drawGrid($(".grid_box").eq(1), "#ae84f0");
	drawGrid($(".grid_box").eq(2), "#00fe88");
	drawGrid($(".grid_box").eq(3), "#f0ff00");
}

function drawGrid(box, color) {
	box.find("canvas").remove();
	var c = $("<canvas class='grid_canvas'></canvas>")[0];
	box.append(c);
	var w = c.width = box.width(),
		h = c.height = box.height(),
		ctx = c.getContext('2d'),
		opts = {
			len: getW(13),
			count: 100,
			baseTime: 10,
			addedTime: 10,
			dieChance: .05,
			spawnChance: 1,
			sparkChance: .1,
			sparkDist: 10,
			sparkSize: 0,
			color: color,
			baseLight: 50,
			addedLight: 10, // [50-10,50+10]
			shadowToTimePropMult: 0,
			baseLightInputMultiplier: .01,
			addedLightInputMultiplier: .02,

			cx: w / 2,
			cy: h / 2,
			repaintAlpha: .04,
			hueChange: .1
		},

		tick = 0,
		lines = [],
		dieX = w / 2 / opts.len,
		dieY = h / 2 / opts.len,

		baseRad = Math.PI * 2 / 4;

	ctx.fillStyle = '#000';
	ctx.fillRect(0, 0, w, h);

	function loop() {
		if(!!box.timer) cancelAnimationFrame(box.timer)
			++tick;
		ctx.globalCompositeOperation = 'source-over';
		ctx.shadowBlur = 0;
		ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
		ctx.fillRect(0, 0, w, h);
		ctx.globalCompositeOperation = 'lighter';

		if(lines.length < opts.count && Math.random() < opts.spawnChance)
			lines.push(new Line);

		lines.map(function(line) {
			line.step();
		});
		box.timer = window.requestAnimationFrame(loop);
	}

	function Line() {
		this.reset();
	}
	Line.prototype.reset = function() {

		this.x = 0;
		this.y = 0;
		this.addedX = 0;
		this.addedY = 0;

		this.rad = 0;

		this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
		this.color = opts.color.replace('hue', tick * opts.hueChange);
		this.cumulativeTime = 0;
		this.beginPhase();
	}
	Line.prototype.beginPhase = function() {

		this.x += this.addedX;
		this.y += this.addedY;

		this.time = 0;
		this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;

		this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
		this.addedX = Math.cos(this.rad);
		this.addedY = Math.sin(this.rad);

		if(Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY)
			this.reset();
	}
	Line.prototype.step = function() {

		++this.time;
		++this.cumulativeTime;

		if(this.time >= this.targetTime)
			this.beginPhase();

		var prop = this.time / this.targetTime,
			wave = Math.sin(prop * Math.PI / 2),
			x = this.addedX * wave,
			y = this.addedY * wave;

		ctx.shadowBlur = prop * opts.shadowToTimePropMult;
		ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
		ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 0.5, 0.5);
		if(Math.random() < opts.sparkChance)
			ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize)
	}
	loop();
}

function getW(num) {
	return num * winW / 607;
}
//顶部两数字滚动
var topNumIndex = 0,
	topNumLoopTime = 10; //顶部两数字滚动重汇时间间隔
function topNumMove() {
	if(!!window.pieChartTimer) cancelAnimationFrame(window.topNumTimer);
	if(topNumIndex >= (topNumLoopTime * 60)) {
		topNumIndex = 0;
		new CountUp($(".todayArrived_num"), 0, todayArrviedNum, 0, 4).start();
		new CountUp($(".todayborrow_num"), 0, todayBorrowNum, 0, 4).start();
	}
	topNumIndex++;
	window.topNumTimer = requestAnimationFrame(topNumMove);
}
//4个网格数字滚动
var rectNumIndex = 0,
	rectNumLoopTime = 8; //顶部两数字滚动重汇时间间隔
function rectNumMove() {
	if(!!window.rectNumTimer) cancelAnimationFrame(window.rectNumTimer);
	if(rectNumIndex >= (rectNumLoopTime * 60)) {
		rectNumIndex = 0;
		new CountUp($(".textContent .day"), 0, libOpen, 0, 2).start();
		new CountUp($(".textContent .hours"), 0, totalHours, 0, 2).start();
		new CountUp($(".textContent .person"), 0, person, 0, 2).start();
		new CountUp($(".textContent .reader"), 0, reader, 0, 2).start();
	}
	rectNumIndex++;
	window.rectNumTimer = requestAnimationFrame(rectNumMove);
}